Flexbox vs Grid

Les deux sont complémentaires : souvent Grid pour la page, Flexbox dans les composants.

Activer Grid

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 colonnes égales */
    gap: 1rem;
}

L'unité fr (fraction) répartit l'espace disponible.

grid-template-columns

grid-template-columns: 200px 1fr;        /* fixe + flexible */
grid-template-columns: repeat(3, 1fr);   /* 3 colonnes égales */
grid-template-columns: 1fr 2fr 1fr;      /* proportions */

repeat(n, valeur) évite les répétitions.

gap

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;            /* lignes ET colonnes */
    row-gap: 2rem;        /* seulement lignes */
    column-gap: 1rem;     /* seulement colonnes */
}

Grille responsive automatique

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

• auto-fit : nombre de colonnes automatique
• minmax(200px, 1fr) : jamais plus étroit que 200px

Une galerie responsive sans media query.

Placer les éléments

.item {
    grid-column: 1 / 3;   /* de la ligne 1 à la ligne 3 */
    grid-row: 1 / 2;
}
.item-large {
    grid-column: span 2;  /* occupe 2 colonnes */
}

span n : occuper n pistes à partir de la position courante.

Exemple : mise en page de page

.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
header, footer { grid-column: 1 / -1; }  /* pleine largeur */

Header pleine largeur, sidebar + contenu, footer pleine largeur.

Résumé Grid

repeat(auto-fit, minmax(...)) = grille responsive sans effort.